<template>
    <div class="category">
        <van-sidebar v-model="activeKey" class="left-box">
            <van-sidebar-item :title="item.name"  v-for="(item,index) in title" :key="index"  @click="getcates(item.id)" />
        </van-sidebar>
        <div class="right-box">
            <div class="category-detail-box">
               <ul class="category-main">
                   <li v-for="(item,index) in cates" :key="index" @click="goods(item.id)">
                       <img :src="item.main_img_url">
                       <p>{{item.name}}</p>
                   </li>
               </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:"category",
    data() {
    return {
        activeKey: 0,
        title:'',
        cateId:2,
        cates:[]
    }
  },
  mounted(){
    this.getcategory();
    this.getcates();
  },
  methods:{
      getcategory(){
          this.axios.get('api/v1/category/all').then((res)=>{
              this.title=res.data;
          }).catch((res)=>{
              return res;
          })
      },
      getcates(id=2){
          this.axios.get('api/v1/product/by_category?id=' + id).then((res)=>{
              this.cates = res.data;
          }).catch((res)=>{
              return res;
          })
      },

      goods(id){
          this.$router.push({
              path:'/goods',
              name:'goods',
              query:{
                id
              }
          })
      }
  }
}
</script>

<style lang="scss">
@import './../assets/scss/base.scss';
    .category{
        display: flex;
        .van-sidebar-item--select::before{
            background:$colorA;
        }
        .left-box{
            flex: 0 0 75px;
        }
        .right-box{
            .category-detail-box{
                padding:20px;
                .category-header{
                    height: 100px;
                    text-align: center;
                    img{
                        width:260px;
                        max-height: 100%;
                    }
                }
                .category-title{
                    margin: 15px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    p{
                        &::before{
                            content: '';
                            display: inline-block;
                            position: relative;
                            top: -3px;
                            width: 35px;
                            height: 1px;
                            margin: 0 10px;
                            background-color: #979797;
                        }

                        &::after{
                            content: '';
                            display: inline-block;
                            position: relative;
                            top: -3px;
                            width: 35px;
                            height: 1px;
                            margin: 0 10px;
                            background-color: #979797;
                        }
                        font-size: 14px;
                    }
                }
                .category-main{
                    display: flex;
                    flex-wrap: wrap;
                    li{
                        width:30%;
                        text-align: center;
                        img{
                            width:60px;
                            height: 60px;
                        }
                        p{
                            font-size: 12px;
                        }
                    }
                }
            }
        }
    }
</style>

